<template>
  <div>
    <!-- 数据列表 -->
    <yd-table
      :formData="extendData"
      :tableConfig="tableConfig"
      :tableData="tableData"
      @sizeChangeHandler="handlerSearch"
      @currentChangeHandler="handlerSearch"
      @sortChangeHandler="handlerSearch"
    ></yd-table>
  </div>
</template>

<script setup name="SysList" lang="tsx">
import { querySysList } from "@/api/ops-workbench/area-health/alarmAnalysisDetail";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { ref, reactive } from "vue";

const { proxy } = useCurrentInstance();
const props = defineProps({
  params: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(['getSysInfo']);

// 表单额外参数
const extendData = reactive({
  ...props.params,
});
// 列表配置
const tableConfig = reactive({
  columns: [
    {
      label: "系统名称",
      prop: "systemName",
      operation: [
        {
          text: undefined,
          rowKey: "systemName",
          handler: (scope: anyObj) => getDetail(scope.row),
        },
      ],
    },
    {
      label: "访问量",
      prop: "count",
    },
    {
      label: "受理量",
      prop: "completeCount",
    },
    {
      label: "失败数",
      prop: "failCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff5d84">{val}</span>;
      },
    },
    {
      label: "告警数",
      prop: "alarmCount",
      renderXss: (row: anyObj, val: ApiVal) => {
        return <span style="color: #ff9a0c">{val}</span>;
      },
    },
    {
      label: "失败率",
      prop: "failRate",
      formatter: (row: anyObj, val: ApiVal) => {
        return val !== null ? val + "%" : val;
      },
    },
    {
      label: "健康率",
      prop: "healthRate",
      formatter: (row: anyObj, val: ApiVal) => {
        return val !== null ? val + "%" : val;
      },
    },
  ],
  pagination: {
    pageSize: 10,
    pageNum: 1,
    total: 0,
  },
  loading: true,
});
// 列表数据
const tableData = ref([]);
const searchData = ref({});

function reloadList(e: anyObj) {
  searchData.value = e;
  handlerSearch();
}
function handlerFormInited() {
  handlerSearch();
}
// 搜索
function handlerSearch() {
  const formData = extendData;
  tableConfig.loading = true;
  querySysList(formData).then((res: ApiResponse) => {
    tableConfig.loading = false;
    if (res.code == 0) {
      tableData.value = res.data.data;
      tableConfig.pagination.total = res.data.total;
      emit("getSysInfo", tableData.value[0]);
    } else {
      proxy.$modal.msgError(res.msg);
      tableData.value = []
      tableConfig.pagination.total = 0;
    }
  });
}
function getDetail(obj: anyObj) {
  emit("getSysInfo", obj);
}
    
handlerFormInited();

defineExpose({
  reloadList
})
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
